<template>
  <view>
    <topCommonTitleBar
      class="topBar"
      positionType="fixed"
      arrow="black"
      titleColor="'#333333'"
      :isBackClick="false"
      @backClick="goBack"
    >
    </topCommonTitleBar>
    <view class="main">
      <view style="height: 190rpx"></view>
      <view class="top" style="padding-top: 52rpx">
        <view class="title">输入验证码</view>
        <view>验证码已发送至{{ form.mobile }}</view>
      </view>
      <view class="code_info">
        <view class="code_error" v-if="codeColor == '#ff0000'"
          >验证码输入错误</view
        >
        <!-- input输入框 -->
        <input
          class="input"
          adjust-position="false"
          auto-blur="true"
          @blur="blur"
          @input="codeNum"
          :focus="focus"
          value="form.captcha"
          v-model="form.captcha"
          type="number"
          maxlength="4"
        />
        <view class="code_input">
          <view
            class="code_line"
            v-for="(item, index) in 4"
            :key="index"
            @click="codeFocus(index)"
            :style="
              index == form.captcha.length
                ? 'border-bottom: 4rpx solid #3c9cff;width: 89rpx;height: 89rpx;line-height: 80rpx;'
                : 'color: ' +
                  codeColor +
                  ';' +
                  'border-bottom: 2rpx solid' +
                  codeColor
            "
          >
            {{ (form.captcha[index] && form.captcha[index]) || "" }}
          </view>
        </view>
      </view>
      <view class="get_code">
        <span v-if="countDown == 60" @click="anewSend()" style="color: #3c9cff"
          >重新发送</span
        >
        <span v-else>{{ countDown }}s后可重新发送</span>
      </view>
    </view>
  </view>
</template>
<script
  type="text/javascript"
  src="plus-confusion://../pages/login/checkCode"
></script>

<style lang="scss">
page {
  background-color: #ffffff;
}
.main {
  padding: 0 60rpx;
  height: 100%;
  background-color: #ffffff;

  .topBar {
    position: fixed;
    width: 750rpx;
    left: 0;
    top: 0;
  }

  .title {
    height: 80rpx;
    font-size: 44rpx;
    font-family: PingFang SC;
    font-weight: 600rpx;
    color: #06121e;
  }

  .code_info {
    margin-top: 120rpx;

    .code_error {
      margin-bottom: 20rpx;
      font-size: 28rpx;
      font-weight: normal;
      color: #ff0000;
    }
  }

  .input {
    position: fixed;
    left: -100rpx;
    width: 50rpx;
    height: 50rpx;
  }

  .get_code {
    margin-top: 51rpx;
    font-size: 26rpx;
    color: #999;
  }

  .code_input {
    margin: auto;
    display: flex;
    justify-content: space-between;

    .code_line {
      margin-top: 5rpx;
      margin-left: 15rpx;
      width: 86rpx;
      height: 86rpx;
      line-height: 86rpx;
      font-size: 60rpx;
      font-weight: bold;
      color: #313131;
      text-align: center;

      &:first-child {
        margin-left: 0rpx;
      }
    }
  }
}
</style>
